<template>
  <div class="my-book">
    <div class="top-bar">
      <h2>书架</h2>
      <button>福利</button>
      <t-icon name="search" class="icon" />
      <t-icon name="ellipsis" class="icon" />
    </div>
    <div class="week-hours">
      <div class="time">本周读2分钟</div>
      <t-row align="center" class="filter-edit">
        <span>筛选</span>
        <t-divider layout="vertical" />
        <span>编辑</span>
      </t-row>
    </div>
    <div class="book-list">
      <div v-for="book in books" :key="book.id" class="book-item">
        <div class="book-cover">
          <img :src="book.cover" alt="Book Cover" class="book-cover" />
        </div>
        <div class="book-info">
          <h3>{{ book.title }}</h3>
          <p>{{ book.readStatus }}</p>
        </div>
      </div>
    </div>
    <nav class="bottom-nav">
      <ul>
        <li><a href="#/shelf">书架</a></li>
        <li><a href="#/bookstore">书城</a></li>
        <li><a href="#/member">会员</a></li>
        <li><a href="#/profile">我的</a></li>
      </ul>
    </nav>
  </div>
</template>
  
  <script>
export default {
  name: 'MyBook',
  data() {
    return {
      books: [
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经爱经爱经爱经爱经爱经爱经爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
        {
          id: 1,
          title: '爱经',
          cover: '/static/img/版权运营7.png',
          readStatus: '已读5.3%'
        },
      ]
    };
  }
};
  </script>
  
  <style scoped lang="less">
.my-book {
    padding: 50rem;
  
    .top-bar {
      display: flex;
      align-items: center;
      gap: 34rem;
      padding-bottom: 40rem;
  
      h2 {
        flex: 1;
        font-size: 40rem;
      }
  
      button {
        width: 100rem;
        height: 50rem;
        line-height: 50rem;
        text-align: center;
        display: block;
        font-size: 20rem;
        color: #fff;
        background: linear-gradient(90deg, #2182f8, #6eabf9);
        border: none;
        border-radius: 25rem;
      }
  
      .icon {
        font-size: 40rem;
      }
    }
  
    .week-hours {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 46rem;
      font-size: 24rem;
  
      .time {
        background-color: #f5f5f5;
        height: 54rem;
        line-height: 54rem;
        border-radius: 27rem;
        padding-left: 40rem;
        padding-right: 40rem;
      }
  
      .filter-edit {
        height: 54rem;
        line-height: 54rem;
        display: flex;
        align-items: center;
      }
    }
  }
  
  .book-list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-left: 50rem;
    padding-bottom: 30rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 200rem;
    overflow-y: auto;
    bottom: 110rem;
    gap: 25rem;  
    .book-item {
      width: 200rem;
  
      .book-cover {
        width: 200rem;
        height: 268rem;
        border-radius: 8rem;
        overflow: hidden;
  
        img {
          width: 200rem;
          display: block;
        }
      }
      .book-info {
        padding-top: 26rem;
        font-size: 26rem;
  
        h3 {
          margin-bottom: 8rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

        }
        p {
          font-size: 24rem;
          color: #999;
          padding-bottom: 40rem;
        }
      }
    }
  }
</style>